<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcss.com/redux/4.0.0/redux.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="decrement">-</div>
    <div>0</div>
    <div id="increment">+</div>
  </body>
  <script>
    // 定义reducer函数
    function reducer(state = { count: 0 }, action) {
      if (action.type === "INCREMENT") {
        return { count: state.count + 1 };
      }
      if (action.type === "DECREMENT") {
        return { count: state.count - 1 };
      }
      return state;
    }
    // 使用recucer函数生成store实例
    const store = Redux.createStore(reducer);

    // 通过store实例的subscribe订阅数据变化
    store.subscribe(() => {
      console.log("state变化了");
    });

    const inBtn = document.getElementById("increment");
    inBtn.addEventListener("click", () => {
      store.dispath({
        type: "INCREMENT",
      });
    });

    const dBtn = document.getElementById("decrement");
    inBtn.addEventListener("click", () => {
      store.dispath({
        type: "DECREMENT",
      });
    });
  </script>
</html>
